<template>
    <el-radio-group :model-value="selectedValue" @input="handleInput">
        <el-radio label="1">Option 1</el-radio>
        <el-radio label="2">Option 2</el-radio>
        <!-- 其他单选框 -->
    </el-radio-group>


    <br />

    <el-upload ref="uploadRef" class="upload-demo" :action="action" :auto-upload="false">
        <template #trigger>
            <el-button type="primary">选择文件</el-button>
        </template>

        <el-button class="ml-3" type="success" @click="submitUpload">
            上传
        </el-button>

        <template #tip>
            <div class="el-upload__tip">
                jpg/png files with a size less than 500kb
            </div>
        </template>
    </el-upload>

</template>

<script>
import { ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
//import type { UploadInstance } from 'element-plus'
export default {
    setup() {
        const selectedValue = ref('1'); // 初始值

        const handleInput = (newValue) => {
            console.log(newValue, newValue.value)
            ElMessageBox.confirm(`Are you sure you want to change to ${newValue}?`, 'Confirm Change', {
                confirmButtonText: 'OK',
                cancelButtonText: 'Cancel',
                type: 'warning',
            }).then(() => {
                // 用户确认后更新值
                selectedValue.value = newValue.target.value;
                ElMessage({
                    type: 'success',
                    message: 'Value changed successfully',
                });
            }).catch(() => {
                // 用户取消后不更新值，可以在这里做额外的处理，比如恢复原来的值
                ElMessage({
                    type: 'info',
                    message: 'Change canceled',
                });
            });
        };



        const uploadRef = ref()

        const submitUpload = () => {
            uploadRef.value.submit()
        }
        const action = ""
        return {
            selectedValue,
            handleInput,
            action
        };
    },
};
</script>